﻿<Window x:Class="Demos.CoinChange.View"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:converter="clr-namespace:Demos.CoinChange" 
        Title="Coin Change" Height="350" Width="425" Background="Black">
    <Window.Resources>
        <converter:AlturaConverter x:Key="myAlturaConverter"></converter:AlturaConverter>
        <converter:AnchuraConverter x:Key="myAnchuraConverter"></converter:AnchuraConverter>
        <converter:MonedasConverter x:Key="myMonedasConverter"></converter:MonedasConverter>
        <converter:FuenteConverter x:Key="myFuenteConverter"></converter:FuenteConverter>
        <Style x:Key="EstiloBotones">
            <Setter Property="Button.FontFamily" Value="Arial"/>
            <Setter Property="Button.FontSize" Value="15"/>
            <Setter Property="Button.Background" Value="Transparent"/>
            <Setter Property="Button.Foreground" Value="{StaticResource {x:Static SystemColors.InactiveCaptionTextBrushKey}}"/>
            <Setter Property="Button.BorderBrush" Value="{StaticResource {x:Static SystemColors.ControlLightBrushKey}}"/>
        </Style>
    </Window.Resources>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="0.3*"></RowDefinition>
        </Grid.RowDefinitions>

        <Canvas Grid.Row="0" Name="SuperiorCv">
            <Rectangle Fill="LightGray" Stroke="DarkGray" StrokeThickness="3" 
                       Width="{Binding Path=ActualWidth, UpdateSourceTrigger=PropertyChanged, ElementName=SuperiorCv}"
                       Height="{Binding Path=ActualHeight, UpdateSourceTrigger=PropertyChanged, ElementName=SuperiorCv}">
            </Rectangle>

            <Grid Width="{Binding Path=ActualWidth, UpdateSourceTrigger=PropertyChanged, ElementName=SuperiorCv}"
                  Height="{Binding Path=ActualHeight, UpdateSourceTrigger=PropertyChanged, ElementName=SuperiorCv}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="3*"></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="10"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition Width="4*"></ColumnDefinition>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                
                <Image Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="6" Margin="10" Source="media/header.png"></Image>

                <Button Grid.Row="1" Grid.Column="1" Style="{StaticResource ResourceKey=EstiloBotones}" 
                        Command="{Binding AumentarCommand}">1c</Button>
                <Button Grid.Row="1" Grid.Column="2" Style="{StaticResource ResourceKey=EstiloBotones}" 
                        Command="{Binding Aumentar2Command}">2c</Button>
                <Button Grid.Row="1" Grid.Column="3" Style="{StaticResource ResourceKey=EstiloBotones}" 
                        Command="{Binding Aumentar5Command}">5c</Button>
                <Button Grid.Row="1" Grid.Column="4" Style="{StaticResource ResourceKey=EstiloBotones}" 
                        Command="{Binding Aumentar10Command}">10c</Button>
                <Button Grid.Row="2" Grid.Column="1" Style="{StaticResource ResourceKey=EstiloBotones}" 
                        Command="{Binding Aumentar20Command}">20c</Button>
                <Button Grid.Row="2" Grid.Column="2" Style="{StaticResource ResourceKey=EstiloBotones}" 
                        Command="{Binding Aumentar50Command}">50c</Button>
                <Button Grid.Row="2" Grid.Column="3" Style="{StaticResource ResourceKey=EstiloBotones}" 
                        Command="{Binding Aumentar100Command}">1€</Button>
                <Button Grid.Row="2" Grid.Column="4" Style="{StaticResource ResourceKey=EstiloBotones}" 
                        Command="{Binding Aumentar200Command}">2€</Button>
                <Button Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="4" Style="{StaticResource ResourceKey=EstiloBotones}" 
                        Command="{Binding ResetCommand}">Reset</Button>

                <TextBox Grid.Row="1" Grid.Column="5" Grid.RowSpan="3" IsEnabled="False" FontSize="{Binding ElementName=SuperiorCv, Path=ActualHeight, Converter={StaticResource myFuenteConverter}}" TextAlignment="Right"
                         Text="{Binding Marcador, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}" 
                         FontFamily="Consolas" Margin="10,0,0,0" VerticalContentAlignment="Center">
                </TextBox>

                <StackPanel Grid.Row="1" Grid.Column="6" Grid.RowSpan="3" Name="botonesSp">
                    <Button Height="{Binding ElementName=botonesSp, Path=ActualHeight, Converter={StaticResource myAlturaConverter}}"
                            Style="{StaticResource ResourceKey=EstiloBotones}" 
                            Command="{Binding AumentarCommand}">+</Button>
                    <Button Height="{Binding ElementName=botonesSp, Path=ActualHeight, Converter={StaticResource myAlturaConverter}}"
                            Style="{StaticResource ResourceKey=EstiloBotones}" 
                            Command="{Binding DisminuirCommand}">-</Button>
                </StackPanel>
                
                <Button Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="6" Padding="4"
                        Width="{Binding ElementName=SuperiorCv, Path=ActualWidth, Converter={StaticResource myAnchuraConverter}}"
                        Style="{StaticResource ResourceKey=EstiloBotones}" 
                        Command="{Binding ChangeCommand}">CHANGE</Button>
            </Grid>
        </Canvas>

        <Separator Grid.Row="1" Background="Black"></Separator>
        
        <ItemsControl Grid.Row="2" Name="Monedero"
                      ItemsSource="{Binding Monedas, UpdateSourceTrigger=PropertyChanged, Mode=OneWay,
                      Converter={StaticResource myMonedasConverter}}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Background="DarkGray"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Canvas Height="{Binding ElementName=Monedero, Path=ActualHeigh, UpdateSourceTrigger=PropertyChanged}">
                        <Grid Name="Moneda">
                            <Ellipse Height="{Binding Diametro}" Width="{Binding Diametro}"
                                     Stroke="{Binding BordeColor}" StrokeThickness="{Binding BordeGrosor}"
                                     Fill="{Binding Fondo}"/>
                            <Label Content="{Binding Valor}" FontWeight="ExtraBold"
                                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                   HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
                            <Grid.Triggers>
                                <EventTrigger RoutedEvent="Grid.Loaded">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation From="-20" To="5" Duration="0:0:0.2"
                                                             Storyboard.TargetName="Moneda"
                                                             Storyboard.TargetProperty="(Canvas.Top)"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Grid.Triggers>
                        </Grid>
                    </Canvas>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>
